<template>
  <el-container>
    <el-aside width=15% class="left">
      <TreemenuVue></TreemenuVue>
    </el-aside>
    <el-container>
      <el-header class="header">
        <BreadVue></BreadVue>
        <el-button-group>
          <el-button type="primary">
            <router-link to="/personal">个人中心</router-link>
          </el-button>
          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
            title="你确定要退出登录吗?" @confirm="confirmEvent" @cancel="cancelEvent">
            <template #reference>
              <el-button type="primary">退出登录</el-button>
            </template>
          </el-popconfirm>
        </el-button-group>
      </el-header>
      <el-main>
         <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
  
<script setup>

import { InfoFilled } from "@element-plus/icons-vue";
import { useUserStore } from "../../stores/user";
import { useRouter } from "vue-router";
import TreemenuVue from "../home/Treemenu.vue"
// 导入面包屑
import BreadVue from '../home/Bread.vue'
const router = useRouter();
const userStore = useUserStore();
const confirmEvent = () => {
  console.log("confirm!");
  userStore.cleraUserInfo();
  router.push("/login");
};
const cancelEvent = () => {
  console.log("cancel!");
};



</script>
<style>
.demonstration {
  color: var(--el-text-color-secondary);
  margin: 0;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-row {
  margin-bottom: 20px;
  border-radius: 4px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* el-aside {
  height: 10000px;
} */

.header {
  height: 70px;
  background-color: rgb(67, 74, 80);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-bottom: 3px solid rgb(255, 208, 75);
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0px;
  margin-right: 0px;
}
</style>